<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div style="min-width: 1024px">
        <h4>物资入出库</h4>
        <Alert show-icon>
            此处用于编辑物资入出库的管理。
        </Alert>
        <Row>
            <Col>
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                       @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                       @on-select-all="tableItemChecked"
                       @on-select-all-cancel="tableItemChecked"
                       style="margin-top:15px;">
                </Table>
            </Col>
        </Row>
        <!--添加-->
        <Modal v-model="addModal" title="添加" @on-ok="handleSubmitAdd('formValidate')"
               @on-cancel="addModal =false">
            <Form ref="formValidate" :model="formValidate" :label-width="100">
                <Form-item label="出库/入库" prop="logType">
                    <i-select v-model="formValidate.logType" placeholder="请选择出入库操作">
                        <i-option value="出库">出库</i-option>
                        <i-option value="入库">入库</i-option>
                    </i-select>
                </Form-item>
                <Form-item label="出/入库数量" prop="reqCount">
                    <i-input v-model="formValidate.reqCount" type="number" placeholder="请输入物资数量"></i-input>
                </Form-item>
                <template v-if="formValidate.logType == '出库'">
                    <Form-item label="选择申领人" prop="Title">
                        <Col span="12">
                            <selectSearch :selectBaseInfo="selectBaseInfo"
                                          @post-data="getCompentensData"></selectSearch>
                        </Col>
                    </Form-item>
                    <Form-item label="出库原因" prop="reason">
                        <Input type="textarea" v-model="formValidate.reason" placeholder="出库原因" :rows="4"/>
                    </Form-item>
                </template>

            </Form>
        </Modal>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import selectSearch from '../../components/selectSearch';

    export default {
        data() {
            return {
                //物资分类id
                sortTypeId: 5,
                self: this,
                tableData: [],
                //记录组件传来的值
                reqpeopleDept: '',
                //选择人员
                selectBaseInfo: {
                    "title": '',
                    "placeholder": '请输入姓名',
                    "postUrl": apiUtil.urls.userList,
                    'postType': 'user',
                },
                //添加
                formValidate: {
                    //添加字段
                    sourceId: '',//领用物品的ID
                    loggerId: '',//登记人的人员编号
                    reqManId: '0',//领用人、申请出库人的Id(如无，请指定为零)
                    reqCount: '',//领用数量
                    reason: '',//出库原因
                    logType: '入库',//登记类型：“出库、入库”
                },
                chooseAreaArr: [],
                rowData:'',
                addModal: false,
                //编辑
                formValidateEdit: {
                    Title: '',//物资名称
                    Infomation: '',//描述
                    //（可选，未来扩展用，JSON段） OtherInfo: ''
                    ItemCount: '',//物资数量
                    Itemunit: '',//数量计量单位，如“个、套、台等 ”
                    Product: '',//厂家或其标识信息
                    Productcontact: '',//联系人或其它标识信息
                },
                editModal: false,
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                //表格
                total: 0,
                current: 1,
                tableColumns: [
                    {
                        title: '物资分类名称',
                        key: 'Title',
                        align: 'center',
                    },
                    {
                        title: '厂家或其标识信息',
                        key: 'Product',
                        align: 'center',
                    },
                    {
                        title: '联系人或其它标识信息',
                        key: 'Productcontact',
                        align: 'center',
                    },
                    {
                        title: '物资数量',
                        key: 'Itemcount',
                        align: 'center',
                    },
                    {
                        title: '数量计量单位',
                        key: 'Itemunit',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 220,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.addClick(params.row)
                                            }
                                        }
                                    }, '出入库登记'),
                                ]
                            )
                        }
                    },
                ]
            }
        },
        mounted() {
            this.mockTableData();
        },
        components: {
            selectSearch
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            //获取选择搜索组件传来结果数据
            getCompentensData: function (value) {
                this.reqpeopleDept = value;
            },
            //tab点击
            tabCLickEvent: function (name) {
                console.log('tab点击参数:', name)
                this.sortTypeId = name;
                this.mockTableData();
            },
            mockTableData() {
                let that = this;

                let para = {
                    // sortTypeId: ''
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                this.tableData = [];
                apiUtil.get(that, apiUtil.urls.SourceList, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg.Arrays;
                });

            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },
            //添加
            handleSubmitAdd(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.addData(model);
                });
            },
            addData: function (model) {
                let that = this;

                model.reqManId = this.reqpeopleDept.resultId;
                model.sourceId = this.rowData.Id;
                model.loggerId = sessionStorage.getItem('userId');

                let params = that.$qs.stringify(model);
                this.$Loading.start();

                console.log(params);

                apiUtil.post(that, apiUtil.urls.SourceOut, params, function (res) {
                    that.$Loading.finish();
                    that.addModal = false;
                    that.mockTableData();
                    that.$Message.info('添加成功 ');
                    that.handleReset('formValidate');

                });
            },
            //点击
            addClick: function (row) {
                this.addModal = true;
                this.rowData =row;
            },
            //重置表单
            handleReset(name) {
                this.$refs[name].resetFields();
            },


        },
    }
</script>
